<template>
  <h2>这是一个h子组件</h2>
  <p>数组是:{{num}}</p>
  <p>消息是:{{msg}}</p>
  <p>v2中的数值是:{{count}}</p>
  <button @click="changeMsg">更改v3字数字</button>
  <button @click="changenum">更改v3字符串</button>
</template>

<script>
//引入ref
import { ref } from 'vue';

export default {
  name: 'HelloWorld_h',
  data() {
    return {
      count: 22,
      info:'Hello v3'
    }
  },
  setup() {
     //在setup这个函数中，无法直接使用this
     //因为setup的执行时机非常早
    console.log('serup', this);
    //这样写出来的数据不是响应式的，想要变成响应式得使用ref，使用ref就得引入
    // ref表示引用的意思，Impl表示实现，意思是说引用ref实现响应式
    let num = ref(10)
    let msg = ref('hell v3')
    //想要使用通过ref变成响应式的值就得通过num.valu但是在setup的函数中可以通过this使用
    function changeMsg() {
      console.log(num);
        this.num+=3
    }

    function changenum() {
        <msg class="value"></msg>='#'
      }
    return {
      num,
      msg,
      changeMsg,
      changenum
     }
  }
}
</script>

<style>

</style>